<template>
    <el-container class="home">
        <el-header style="text-align: right; font-size: 12px">
            <Header></Header>
        </el-header>
        <el-container class="container">
            <el-aside width="200px" class="aside">
                <Aside></Aside>
            </el-aside>
            <el-main class="main">
                <!-- 二级视图 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>        
  
<script>
import {mapGetters} from "vuex";

import Header from "./Header";
import Aside from "./Aside";


export default {
    name: "HomeView",
    data() {
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };

        return {
            tableData: Array(20).fill(item)
        }
    },
    computed: {
        ...mapGetters(["isLogin"])
    },
    components: {
        Header,
        Aside
    },

    created(){
    },
    mounted() {
        // home页面 => 进入home页面需要登录验证 

        console.log("主页面中isLogin", this.isLogin);
        if(!this.isLogin){  // 没有登录  -> 去登录
            this.$router.push({name:"login",query:{ReturnUrl:this.$route.fullPath}})
        }
    }
};
</script>


<style lang="scss" scoped>
.home {
    width: 100%;
    height: 100%;
}

.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}

.container {
    flex: 1;
    overflow: hidden;
}

.aside {
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
}

.main {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
}</style>